[#ftl]
[#--include "../../util.ftl"/--]
[#assign templateString][#compress]		
<div  class="agileComponent agileTitlePane" style="overflow:hidden">	
	<table class="dijitTitlePaneTitle" style="width:100%;" data-dojo-attach-point="titleBarNode" data-dojo-attach-event="onclick:onTitleClick" >
		<tr>				
			<td style="width:10px">
				<span data-dojo-attach-point="arrowNodeOpen">+</span>
				<span data-dojo-attach-point="arrowNodeClose">-</span>
			</td>
			<td><span class="dijitTitlePaneTextNode" data-dojo-type='dijit.InlineEditBox'  data-dojo-attach-point='paneTitle'>{parameters.title}</span></td>
		</tr>
	</table>
	[#--
	<div class="dijitTitlePaneTitle" style="width:100%" data-dojo-attach-point="titleBarNode" data-dojo-attach-event="onclick:onTitleClick" >		
		<span data-dojo-attach-point="arrowNodeOpen">+</span>
		<span data-dojo-attach-point="arrowNodeClose">-</span>			
		<span style="position:absolute;left:12px;top:0px" class="dijitTitlePaneTextNode" data-dojo-type='dijit.InlineEditBox'  data-dojo-attach-point='paneTitle'>{parameters.title}</span>	
	</div>
	--]
	<div style="background-color:transparent;height:100%;overflow:hidden" class="dijitTitlePaneContentOuter" data-dojo-attach-point="containerNode"></div>
</div>
[/#compress][/#assign]

[@define "agile.dijit.TitlePane" "agile._Component,agile._Container,agile._Resizable,agile._PinAdvice"]
	category:"TitlePane Component"		
	,widgetName:"TitlePane"
	,templateString: "${templateString?js_string}"
	,hasSelector:true
//	,templateMap:{
//		dojo:"<div {id} data-dojo-type='{dojoDeclaredClass}' data-dojo-props='{style-props}'><div {html-style}>{innerWidets}</div></div>"
//		,agile:"<div data-dojo-type='{declaredClass}' data-dojo-props='{style-props}'>{innerWidets}</div>"
//	}
	,styleMap:null	
	,styleConstraints:agile.delegate(agile._Component.prototype.styleConstraints,{
		"height":{ignore:function(ownerWidget,sourceType){ return sourceType == "dojo"}}
		,"*":{exceptions:"left top width position z-index",ignore:function(ownerWidget,sourceType,name){ return sourceType == "dojo" && (this.exceptions.indexOf(name) == -1)}}
	})
	,attributes:lang.delegate(agile._Component.prototype.attributes,{
		title:lang.mixin({},agile.TextMetadata,{
			label:"i18n_title",
			onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){	
				widget.metadata(this.metadataCategory+"."+name,value);
				widget.paneTitle.reset1("value",value);
			}
		})			
		,open:lang.mixin({},agile.BooleanMetadata,{
			label:"i18n_open",
			onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){								
				widget.metadata("parameters.open",value);
				widget.display(value);
			}
		})
	})
	,_getDelegatePrototype:function(){
		agile.requireX("dijit.TitlePane");			
		agile.requireX("dijit.InlineEditBox");
		return dijit.TitlePane.prototype;
	}
	,initDefaultMetadata:function(){
		this.metadata("parameters.title","Hello");			
		this.metadata("parameters.open",true);	
		this.metadata("dojoDeclaredClass","dijit.TitlePane");
		this.metadata("style.height","200px");
		this.metadata("style.width","300px");
	}
	
	,init:function(){			
//		console.log(this.declaredClass,"init###",this._initTitlePane)
		
		if(this._initTitlePane) return;
		this._initTitlePane = true;
		
//		this.titleHeight = geometry.getMarginBox(this.titleBarNode).h;
//		style.set(this.domNode,{height:null});
//		agile.stopInlineEditBox(this.paneTitle);
		this.preventDelete(this.paneTitle);
		this.own(aspect.after(this.paneTitle,"onChange",lang.hitch(this,function(newValue){										
			topic.publish("agile.widget.changed",this.category,"title",newValue);					
			this.metadata("parameters.title",newValue);
		}),true));
//		style.set(this.domNode,{"height":"auto","width":"auto"});
//		style.set(this.containerNode,{"height":"auto","width":"auto"});
		this.display(true);
//		console.log(this.declaredClass,"init####")
	}
	,onTitleClick:function(evt){
		//this.display(!this.metadata("parameters.open"));
		this.display(!this.isOpen);
	}
	,display:function(isOpen){
		//console.log("isOpen=",isOpen);
		this.isOpen = isOpen;
				
		style.set(this.arrowNodeOpen,"display",isOpen?"none":"block");
		style.set(this.arrowNodeClose,"display",isOpen?"block":"none");		
		this.titleHeight = geometry.getMarginBox(this.titleBarNode).h;
		if(isOpen){
			style.set(this.domNode,{"height":(this.dimension.height)+"px"});
//			style.set(this.containerNode,{"height":(this.dimension.height - this.titleHeight)+"px"});
			style.set(this.containerNode,{"display":"block"});
//			style.set(this.containerNode,{"height":"auto"});
		}else{			
			style.set(this.domNode,{"height":(this.titleHeight)+"px"});
			style.set(this.containerNode,{"display":"none"});
		}		
		style.set(this.resizeHandle.domNode,"visibility",isOpen?"visible":"hidden");
	}

	,initResizable:function(){
		this.inherited(arguments);			
		if(this.metadata("parameters.open")){
			style.set(this.resizeHandle.domNode,"visibility","visible");
		}
		else{
			style.set(this.resizeHandle.domNode,"visibility","hidden");
		}
	}
	,getResizableTargetContainer:function(){
		return this.domNode;
	}
	,getResizeHandleAnchorNode:function(){
		return this.domNode;
	}
	,getInnerWidgetTemplate:function(params){
		var innerWidgets = this.inherited(arguments);
		if(params.sourceType == "dojo"){						
			var containerStyle = lang.mixin({},this.metadata("style"))
			for(var i = 0, a = "left top width position z-index".split(" "); i < a.length; i++){
				delete containerStyle[a[i]];
			}
			containerStyle.height = (this.dimension.height - this.titleHeight)+ "px";
			innerWidgets = lang.replace("<div {innerStyle}>{innerWidgets}</div>",{"innerStyle":this.serializeStyle(containerStyle,params.sourceType,"html"),"innerWidgets":innerWidgets});
			
//			innerWidgets = "<div style='height:" + (this.dimension.height - this.titleHeight)+ "px'>"+innerWidgets+"</div>";
		}
		return innerWidgets;
	}
	,getStyleNodes:function(htmlName){
		if("left top width height position z-index".indexOf(htmlName) == -1){
			return [this.domNode];
		}		
		return [this.domNode];
	}
	,getMovableConstraint:function(){									
		return {
			l: 1
			,t: this.titleHeight + 1
			,w: this.dimension.width - 1
			,h: this.dimension.height - 1 - this.titleHeight
		}		
	}
[/@]
